<template>
  <div class="container">
    <el-card v-for="(item, i) in vacItem" :key="i" class="ym-box">
      <h3 style="margin-bottom:0; text-align: center;margin-top:0 ">
        {{ item.vaccineName }}
      </h3>
      <p style="margin-top:10px; font-size:12px; text-align: center;">
        余量:{{ item.appointmentNum }}
      </p>
      <el-tag
        type="info"
        effect="dark"
        v-if="item.state == '余量不足'"
        style=" height:30px; margin:20px 20px"
        >{{ item.state }}</el-tag
      >
      <el-tag
        type="success"
        effect="dark"
        v-if="item.state == '已接种'"
        style=" height:30px; margin:20px 20px"
        >{{ item.state }}</el-tag
      >
      <el-tag
        effect="dark"
        v-if="item.state == '待接种'"
        style=" height:30px; margin:20px 20px"
        >{{ item.state }}</el-tag
      >
      <button
        v-if="item.state == '可预约'"
        style="background:red; height:30px; margin:20px 20px"
        @click="order(item.vaccineId)"
      >
        {{ item.state }}
      </button>
    </el-card>
    <!-- 预约弹窗 -->
    <el-dialog
      title="接种预约"
      :visible="visible"
      size="small"
      @close="close"
      width="465px"
    >
      <el-form :model="form" inline label-position="right" label-width="80px">
        <el-form-item label="接种人:">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width:276px"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话:">
          <el-input
            v-model="form.phone"
            autocomplete="off"
            style="width:276px"
          ></el-input>
        </el-form-item>
        <el-form-item label="接种时间:">
          <el-date-picker
            v-model="form.date"
            format="yyyy-MM-dd HH:mm:ss"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            style="width:276px"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addOrder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vaccineId: "",
      form: {},
      visible: false,
      vacItem: [],
      userData: {},
      VacItemData: { pageNum: 1, pageSize: 50, userId: "" }
    };
  },
  methods: {
    abc() {
      this.centerDialogVisible = true;
      console.log(this.centerDialogVisible);
    },
    onShow() {
      this.centerDialogVisible = true;
      console.log(this.centerDialogVisible);
    },
    order(e) {
      this.visible = true;
      this.vaccineId = e;
    },
    close() {
      this.visible = false;
    },
    getVacItem() {
      this.$http.post("/vaccine/selectByUserId", this.VacItemData).then(res => {
        this.vacItem = res.data.data.data;
        console.log(this.vacItem);
      });
    },
    addOrder(e) {
      this.$http
        .post("/appointment/userAppointment", {
          appointmentTime: this.form.date,
          callphone: this.form.phone,
          userId: this.VacItemData.userId,
          userName: this.form.name,
          vaccineId: this.vaccineId
        })
        .then(res => {
          if (res.data.code == 200) {
            (this.visible = false), this.$message.success("预约成功");
            console.log(res);
          }
        });
    }
  },
  mounted() {
    this.VacItemData.userId = JSON.parse(
      sessionStorage.getItem("userData")
    ).userId;
    this.getVacItem();
  }
};

// import register from "./register.vue";
</script>
<style lang="less" scoped>
.ym-box {
  background: rgba(117, 114, 114, 0.322);
  display: flex;
  justify-content: center;
  width: 168px;
  height: 176px;
  margin-left: 23px;
  margin-bottom: 20px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
</style>
